{%- comment -%}
  普通下拉菜单，形如Bootstrap Dropdown组件，可支持配置到第三级菜单
  注意配置到第三级菜单时，使用hover展开第三级菜单的交互不友好请修改为点击展开

  Accepts:
    - hover_style: {Object} 一级菜单hover样式
    - link: {String} link object
    - background_color: {String} 页头背景色
{%- endcomment -%}

<div class="with-default-dropdown as-details-toggle">
  <a href="javascript:void(0);"  class="nav-link {{ hover_style }} ">
    <span>{{ link.title }}</span>
    <span>{% render 'icon-chevron-down' %}</span>
  </a>

  <ul class="default-dropdown list-unstyled {{ background_color }} as-details-content">
    {%- for sublink in link.links -%}
      <li class="menu">
        <a {% if sublink.levels == 0 %}{% render 'link', link: sublink.url %} href="{{ sublink.url }}"{% else %}href="javascript:void(0);"{% endif %} 
          class="menu-item {% if forloop.last %}as-last{% endif %} {% if sublink.levels >= 0 %}d-flex justify-content-between{% endif %}">
          {% if sublink.levels == 0 %}
            {{ sublink.title }}
          {% else %}
            <span>{{ sublink.title }}</span>
            <span>{% render 'icon-chevron-down' %}</span>
          {% endif %}
        </a>
        {% if sublink.levels >= 0 %}
          <ul class="sub-menu list-unstyled">
            {% for thirdmenu in sublink.links %}
              <li>
                <a {% render 'link', link: thirdmenu.url %} 
                  class="menu-item {% if forloop.last %}as-last{% endif %}" 
                  href="{{ thirdmenu.url }}">{{ thirdmenu.title }}</a>
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      </li>
    {%- endfor -%}
  </ul>
</div>